<template>
	<section class="i_application resourceFloor maxW">
		<div class="i_applicationTitle clear">
			<span>推荐资源</span>
			<router-link class="i_more fr" to="/home/resourceList">
				更多
				<i class="ipng Shape_13"></i>
			</router-link>
		</div>
		<div class="i_hResourcesBox">
			<ul class="resource_list clear">
				<template v-for="(item, index) in opctions">
					<li class="i_hResourcesLs fl" :key="index" v-if="item">
						<div class="i_hResourcesT clear">
							<router-link
								:to="{
									path: '/home/resourceDetail',
									query: { id: item.id }
								}"
								:title="item.name"
							>
								{{ item.name }}.{{ item.postfix }}
							</router-link>
							<i class="resource_icon fr"><img :src="BASE_URL + '/static/index/images/format/resourceicon' + item.file_type + '.png'" /></i>
						</div>
						<div class="i_hResourcesS clear">
							<div class="i_hScore fl clear">
								<el-rate :value="item.scores / 2" disabled class="fl"></el-rate>
								<strong>{{ item.scores }}</strong>
							</div>
							<div class="i_hCollect fr">
								<i :class="[item.f_count == 0 ? 'ipng Collection04' : 'ipng praise']"></i>
								<strong>{{ item.f_count }}</strong>
							</div>
						</div>
						<div class="i_rUser">
							<router-link
								class="avatar"
								:to="{
									path: '/teach/space',
									query: { id: item.u_id }
								}"
							>
								<span><img :src="BASE_URL + item.u_avatar_path" /></span>
								{{ item.u_name }}
							</router-link>
							<div class="push-name" :title="item.source_school">{{ item.source_school }}</div>
							<div class="category" :title="item.cate_name">{{ item.cate_name }}</div>
						</div>
					</li>
					<!-- 占位符 -->
					<li class="i_hResourcesLs fl" :key="index" v-else></li>
				</template>
			</ul>
		</div>

	</section>
</template>
<script>
export default {
    props: {
        opctions: {
            require:true,
            type: Array,
            default() {
                return [];
            }
        },

    },
    data() {
        return {
        };
    },
    mounted() {
    },
    watch: {

    },

    methods: {

    }
};
</script>
<style lang="scss">
	.resourceFloor {
		.i_rUser {
			display: flex;
			align-items: center;
			justify-content: space-around;
			color: #606266;
			> a {
				width: 100px;
				font-size: 12px;
				text-align: left;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			.push-name,
			.category {
				width: 80px;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			.push-name {
				text-align: center;
			}
			.category {
				text-align: right;
			}
		}
	}

	.albumFloor {
		.schoolInfo {
			overflow-x: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			.creater {
				display: inline-block;
				width: 120px;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}
	}
	.resource-counts {
		width: 100%;
		height: 40px;
		margin: 15px auto;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: 1fr;
		align-items: center;
		justify-items: center;
		background-color: #fff;
        border-radius: 3px;
        box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.1);
        .count-word{
            font-size: 14px;
            i{
                display: inline-block;
                color: #eba300;
                max-width: 80px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }
        }
	}
</style>
